<template>
    <div class="form-config-container">
        <el-form label-position="top">
            <el-form-item label="开启模板">
                <el-switch
                    v-model="data.isMoban"
                />
            </el-form-item>
            <el-form-item label="固定像素大小">
                <el-switch
                    v-model="data.isFixedSize"
                />
            </el-form-item>
            <el-form-item label="分辨率">
                <el-radio-group v-model="data.radio" @change="radioChange">
                    <el-radio label="pc">PC端</el-radio>
                    <el-radio label="phone">移动端</el-radio>
                    <el-radio label="moban">小模板</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="模板名称" v-if="data.radio=='moban'">
                <el-input v-model="data.mobanName"/>
            </el-form-item>
            <el-form-item label="模板宽度">
                <el-input v-model="data.width" @change="widthChange"/>
            </el-form-item>
            <el-form-item label="模板高度">
                <el-input v-model="data.height"/>
            </el-form-item>
            <el-form-item label="模板背景">
                <el-color-picker v-model="data.background"/>
            </el-form-item>
            <el-form-item label="标签对齐方式">
                <el-radio-group v-model="data.labelPosition">
                    <el-radio-button label="left">左对齐</el-radio-button>
                    <el-radio-button label="right">右对齐</el-radio-button>
                    <el-radio-button label="top">顶部对齐</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="组件尺寸">
                <el-radio-group v-model="data.size">
                    <el-radio-button label="medium">medium</el-radio-button>
                    <el-radio-button label="small">small</el-radio-button>
                    <el-radio-button label="mini">mini</el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: ['data'],
    data() {
        return {
            radio: 'pc'
        }
    },
    methods: {
        radioChange() {
            if (this.data.radio == 'pc') {
                this.data.width = 1200
                this.data.height = 800
            } else if (this.data.radio == 'phone') {
                this.data.width = 375
                this.data.height = 700
            } else if (this.data.radio == 'moban') {
                this.data.width = 400
                this.data.height = 600
            }
        },
        widthChange() {
            this.$nextTick();
        }
    }
}
</script>
